<template>
  <div class="post-item">
    <div class="post-content">{{ post.content }}</div>
    <div class="post-images" v-if="post.images && post.images.length">
      <img v-for="(img, index) in post.images" 
           :key="index" 
           :src="img" 
           class="post-image" />
    </div>
    <div class="post-footer">
      <div class="post-author">
        <img :src="post.authorAvatar" class="author-avatar" />
        <div class="author-name">{{ post.authorName }}</div>
        <div class="post-time">{{ post.createTime }}</div>
      </div>
      <div class="post-actions">
        <div class="action-item">
          <i class="icon-like"></i>
          <span>{{ post.likes }}</span>
        </div>
        <div class="action-item">
          <i class="icon-comment"></i>
          <span>{{ post.comments }}</span>
        </div>
        <div class="action-item">
          <i class="icon-share"></i>
          <span>分享</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps<{
  id: string
}>()

interface Post {
  id: string
  authorName: string
  authorAvatar: string
  content: string
  createTime: string
  images?: string[]
  likes: number
  comments: number
}

const post = ref<Post>({
  id: '1',
  authorName: '张三',
  authorAvatar: '/default-avatar.png',
  content: '今天天气真不错！',
  createTime: '2小时前',
  images: ['/demo-image-1.jpg'],
  likes: 12,
  comments: 3
})

onMounted(() => {
  // 实际项目中这里应该根据 props.id 获取数据
  console.log('加载帖子:', props.id)
})
</script>

<style scoped lang="scss">
.post-item {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.post-content {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.post-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;

  .post-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
  }
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #eee;

  .post-author {
    display: flex;
    align-items: center;
    gap: 8px;

    .author-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
    }

    .author-name {
      font-size: 13px;
      color: #333;
    }

    .post-time {
      font-size: 12px;
      color: #999;
    }
  }

  .post-actions {
    display: flex;
    gap: 16px;

    .action-item {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #666;
      font-size: 13px;
      cursor: pointer;

      &:hover {
        color: #007bff;
      }
    }
  }
}
</style>
